window.onload = function () {
  let login = JSON.parse(localStorage.getItem('login'))
  if (login == 1) {
    alert('请先登录')
    window.location.href = 'login.html'
  }
}

let userK = 0
let passwdK = 0
// 用户名和密码失去焦点事件
// 用户名
document.querySelector('.top td .userName').addEventListener('blur', function () {

  if (!userYz(this.value)) {
    alert('请输入至少3位的字符')
    addWarn(this)
  } else {
    removeWarn(this)
    userK = 1
  }

})
// 密码
document.querySelector('.top td .passwd').addEventListener('blur', function () {
  console.log(this.value)
  if (!passwdYz(this.value)) {
    alert('请输入至少6位的字符')
    // this.focus()
    addWarn(this)
  } else {
    removeWarn(this)
    passwdK = 1
  }
})

// 添加警告函数
function addWarn(inp) {
  inp.classList.add('red')
}
// 移除警告函数
function removeWarn(inp) {
  inp.classList.remove('red')
}

// 查看密码
document.querySelector('.top  td span').addEventListener('click', function () {
  let inputType = document.querySelector('.top td .passwd')
  inputType.type === 'password' ? (inputType.type = 'text', this.classList.toggle('icon-yanjing_yincang_o'), this.classList.add('icon-yanjing_xianshi_o')) : (inputType.type = 'password', this.classList.toggle('icon-yanjing_xianshi_o'), this.classList.add('icon-yanjing_yincang_o'))
})

// 密码验证函数
let passwdReg = /.{6,}/
function passwdYz(passwdValue) {
  return passwdReg.test(passwdValue)
}
// 用户名验证函数
let userReg = /.{3,}/
function userYz(userValue) {
  return userReg.test(userValue)
}


// 添加
document.querySelector('.addUserBtn').addEventListener('click', function () {
  // 获取下拉框
  let k = 0
  let type = document.querySelector('#type')
  let pwd = document.querySelector('.top td .passwd')
  let user = document.querySelector('.top td .userName')
  let arr = JSON.parse(localStorage.getItem('user')) || []
  if (userK === 1 && passwdK === 1) {
    console.log(2222)
    for (m of arr) {
      if (m.username === user.value && m.userType === type.options[type.selectedIndex].value) {
        console.log(3333)
        alert('存在该用户')
        addWarn(user)
        userK = 0
        return
      } else {
        console.log(4444)
        removeWarn(this)
        k = 1
      }
    }
    if (k === 1) {
      console.log(14444)
      let obj = {
        username: user.value,
        password: pwd.value,
        userType: type.options[type.selectedIndex].value
      }
      arr.push(obj)
      localStorage.setItem('user', JSON.stringify(arr))
      XR()
    }
  } else {
    console.log(555)
    alert('请添加有效的信息')
  }
})

// 渲染函数
let tbody = document.querySelector('.userShow tbody')
function XR() {
  tbody.innerHTML = ''
  let arr = JSON.parse(localStorage.getItem('user')) || []
  // 由于这里设置为0后面加取索引的时候要加一
  let i = 0
  for (mes of arr) {
    i++
    // 创建标签
    const tr = document.createElement('tr')
    if (mes.userType === '管理员') {
      tr.innerHTML =
        `
      <tr>
      <td><p class='tdName'>${mes.username}</p></td>
      <td>
        <input type="password" class="passwdIpt" value="${mes.password}" placeholder="至少6位的字符">
        <span class="iconfont icon-yanjing_yincang_o yj" data-id='${i - 1}'></span>
      </td>
      <td>
        <select name="" id="show">
          <option value="管理员">管理员</option>
          <option value="学生">学生</option>
        </select>
      </td>
      <td>
        <button class='del' data-id='${i - 1}'>删除</button>
        <button class='XG' data-id='${i - 1}'>修改</button>
      </td>
      `
      tbody.appendChild(tr)
    } else {
      tr.innerHTML = `
      <tr>
      <td><p class='tdName'>${mes.username}</p></td>
      <td><input type="password" class="passwdIpt" value="${mes.password}" placeholder="至少6位的字符">
        <span class="iconfont icon-yanjing_yincang_o yj" data-id='${i - 1}'></span>
      </td>
      <td>
        <select name="" id="show">
          <option value="学生">学生</option>
          <option value="管理员">管理员</option>
        </select>
      </td>
      <td>
        <button class='del' data-id='${i - 1}'>删除</button>
        <button class='XG' data-id='${i - 1}'>修改</button>
      </td>
  `
      tbody.appendChild(tr)
    }

  }
}
// 页面打开渲染
XR()
// 事件委托
tbody.addEventListener('click', function (e) {
  let name = document.querySelectorAll('.tdName')
  let type = document.querySelectorAll('#show')
  let span = document.querySelectorAll('.yj')
  let passwdIpt = document.querySelectorAll('.passwdIpt')
  let i = e.target.dataset.id
  //获取本地存储
  let arr = JSON.parse(localStorage.getItem('user'))
  let login = JSON.parse(localStorage.getItem('login'))

  // console.log(type[e.target.dataset.id].options[0].value)
  // console.log(name[e.target.dataset.id].innerHTML, login[0].username)
  // console.log(type[e.target.dataset.id].options[0].value, login[0].userType)
  console.log(e.target.tagName)
  console.log(span[e.target.dataset.id])
  // 删除按钮
  if (e.target.className === 'del') {
    if (name[i].innerHTML === login[0].username && type[i].options[0].value === '管理员') {
      alert('当前用户无法删除')
    } else {
      arr.splice(e.target.dataset.id, 1)
      localStorage.setItem('user', JSON.stringify(arr))
      XR()
    }
  }
  // 密码显示
  let spanMes = span[e.target.dataset.id]
  let pidt = passwdIpt[e.target.dataset.id]
  if (e.target.tagName === 'SPAN') {
    if (span[i]) {
      // console.log(span[i])
      pidt.type === 'password' ? (pidt.type = 'text', spanMes.classList.toggle('icon-yanjing_yincang_o'), spanMes.classList.add('icon-yanjing_xianshi_o')) : (pidt.type = 'password', spanMes.classList.toggle('icon-yanjing_xianshi_o'), spanMes.classList.add('icon-yanjing_yincang_o'))
    }
  }

  // 修改按钮
  if (e.target.className === 'XG') {
    if (name[i].innerHTML === login[0].username && type[i].options[0].value === '管理员') {
      alert('当前管理员无法修改，密码请到设置修改')
    } else {
      if (!passwdYz(passwdIpt[i].value)) {
        alert('请输入至少6位的字符')
        addWarn(passwdIpt[i])
      } else {
        removeWarn(passwdIpt[i])
        arr[i].username = name[i].innerHTML
        arr[i].password = passwdIpt[i].value
        arr[i].userType = type[i].options[type[i].selectedIndex].value
        console.log(arr)
        localStorage.setItem('user', JSON.stringify(arr))
        XR()
      }
    }


  }


})